<template>
  <div>
    <van-search background="#069ffd" v-model="value" placeholder="请输入搜索关键词" />
    <div style="height:3rem"></div>
    <van-tabs v-model="active" animated>
      <van-tab title="标签 1">
        <div style="height:3rem"></div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="list-t" v-for="item in list" :key="item">
              <div style=" width: 100%; height: 7rem; background:#ffffff">
                <van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
              </div>
              <div class="shop-title">的空间卡法时间骄傲的考虑</div>
              <div class="shop-desc">的空间卡法时间骄傲的考虑时间分厘卡撒酒疯盎司附近</div>
              <div style="display:flex">
                <div style="width: 48%;font-size: 1.4rem; color: red;">￥100</div>
                <div style="width:48%">
                  <i class="iconfont" style="font-size: 26px;   padding-left: 50px;">&#xe64c;</i>
                </div>
              </div>
            </div>
          </van-list>
          <div style="height:3rem"></div>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
      <van-tab title="标签 5">内容 5</van-tab>
      <van-tab title="标签 6">内容 6</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listTab: [
        {
          title: "水果",
          children: {
            content: "内容1",
          },
        },
      ],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>


<style>
.van-search {
  background: rgb(6, 159, 253);
  height: 3rem;
  padding: 10px 89px !important;
  position: fixed;
  z-index: 1;
}
.van-search__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding-left: 8px;
  background-color: #f7f8fa;
  border-radius: 21px;
  height: 1.9rem;
}
.van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  display: block;
  min-width: 1em;
  font-size: 18px;
  line-height: 24px;
}
.van-field__control {
  width: 100%;
  min-width: 0;
  font-size: 17px;
  resize: none;
}

.list-t {
  width: 45%;
  float: left;
  height: 204px;
  margin: 5px 9px;
  background: #ffffff;
  border-radius: 5%;
}
.shop-title {
  font-size: 13px;
  text-align: left;
  padding: 1px 5px 1px 7px;
  font-weight: 900;
  font-family: inherit;
}
.shop-desc {
  font-size: 11px;
  text-align: left;
  padding: 1px 5px 1px 7px;
}
.van-search[data-v-5e1410ea] {
  background: rgb(6, 159, 253);
  height: 3rem;
  padding: 10px 89px;
  position: fixed;
  z-index: 1;
  width: 100%;
}
.van-search[data-v-5e1410ea] {
  background: rgb(6, 159, 253);
  height: 3rem;
  padding: 10px 89px;
  position: fixed;
  z-index: 1;
  width: 100%;
}
.van-tabs--line .van-tabs__wrap {
  height: 44px;
  /* display: flex; */
  position: fixed;
  width: 100%;
  z-index: 1;
}
</style>
